<script setup lang="ts">
const props = defineProps<{ chartData: any }>()
</script>

<template>
  <ul class="table">
    <li
      v-for="(item, index) in props.chartData[1].name"
      :key="index"
      class="table-row"
    >
      <div class="table-cell table-cell-left">{{ item }}</div>
      <div class="table-cell table-cell-right">
        <span
          :class="{
            red: props.chartData[1][
              index === 0 ? 'valueDifference' : 'YoYIncrease'
            ].includes('-'),
          }"
        >
          {{
            props.chartData[1][index === 0 ? 'valueDifference' : 'YoYIncrease']
          }}
        </span>
      </div>
    </li>
  </ul>
</template>

<style lang="scss" scoped>
.table {
  width: 100%;
  height: 260px;
  background-image: url('@/assets/images/canvsimage/default.png');
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .table-row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 30%;
  }

  .table-cell {
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50%; // 修改了这里的值
    text-align: left; // 修改了这里的值
  }

  .table-cell-left {
    justify-content: flex-end;
    height: 40px;
  }

  .table-cell-right {
    justify-content: flex-start;
  }

  .red {
    color: red;
  }
}
</style>
